<template>
  <div class="card-container">
    <el-card class="card" v-for="(item, index) in newsList" :key="index">
      <div slot="header" class="card-header">
        <img class="card-image" :src="item.img" alt="Card Image" />
        <div class="card-title">{{ item.title }}</div>
      </div>
      <div class="card-body">
        <div class="card-time">发布时间: {{ item.publishTime }}</div>
        <div class="card-content">发布内容: {{ item.content }}</div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      newsList: [
        {
          img: require("@/assets/新闻1.jpg"),
          title: "''过硬本领展素养 青春风采作表率'',学院举办第三届学生干部素质能力大赛",
          publishTime: "2023-01-01 12:00:00",
          content: "为贯彻落实学校第四次党代会报告中“让‘433’工程走深走实”的部署，根据年度“春融”行动计划“指导学生担任1任干部”...",
        },
        {
          img: require("@/assets/新闻2.jpg"),
          title: "引领学生“爱岗位”——信息技术学院扎实推进学生生涯规划教育",
          publishTime: "2023-12-04",
          content: "为加强学院学生生涯教育和就业指导，增强大学生生涯规划意识，充分发挥就业育人作用，信息技术学院多措并举夯基础，扎实推进学生职业生涯规划教育，重点提升学生的就业能力。...",
        },
        {
          img: require("@/assets/新闻3.jpg"),
          title: "引领学生“爱岗位”——信息技术学院与搜狐苏南运营中心开展深度合作",
          publishTime: "2023-11-23",
          content: "为坚持校企合作的根本路径，通过访企拓岗促合作，11月22日，信息技术学院师生代表赴搜狐网苏南运营中心开展访企拓岗活动。信息学院党总支副书记李骥、辅导员怀璐欣、2024届毕业班学生代表参加了活动”...",
        },
        {
          img: require("@/assets/新闻4.jpg"),
          title: "引领学生“爱党、爱国、爱民族”——学院开展2023年秋季学期学生党员发展培训",
          publishTime: "2023-10-17 ",
          content: "为全面贯彻党的二十大精神，坚持不懈用习近平新时代中国特色社会主义思想凝心铸魂，做好大学生党员发展和培养工作，信息技术学院和会计与国贸学院在10月14日于图书馆报告厅共同开展秋季学期党员培训。...",
        },
        {
          img: require("@/assets/新闻5.jpg"),
          title: "引领学生“爱自己”——信息技术学院开展网络与信息安全应急演练活动",
          publishTime: "2023-06-02",
          content: "为了提高学生的网络安全意识，更好的学习网络安全专业知识，我院邀请校企合作单位苏州亿阳值通科技发展股份有限公司共同主办网络与信息安全应急演练活动，活动于5月31日在我院实训机房展开。计算机网络技术专业21级学生和全体信息技术安全专业老师、智慧校园服务中心管理人员参加了本次活动。...",
        },
        {
          img: require("@/assets/新闻6.jpg"),
          title: "引领学生“爱社会”——信息技术学院开展“七彩假日，精彩‘童’行”暑期社会实践活动",
          publishTime: "2023-09-05",
          content: "为了丰富青少年暑期生活，助力未成年人思想道德教育与文化素质教育，促进未成年人健康成长，信息技术学院“七彩假日，精彩‘童’行”暑期社会实践团队近期在苏州市吴中区马庄社区开展了公益暑托班支教活动。...",
        },
      ]
    }
  },
};
</script>

<style scoped>
.card-container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  width: 400px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.card-header {
  display: flex;
  align-items: center;
}

.card-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
}

.card-body {
  margin: 10px 0;
}

.card-time {
  color: #999;
  margin-bottom: 10px;
}

.card-content {
  /* color: #999; */
  line-height: 1.5;
}
</style>
